<template>
  <div>
    <!-- 顶部浮动图片，跳转至诈骗网页 -->
    <a href="https://www.bilibili.com/video/BV1uT4y1P7CX/?spm_id_from=333.788.recommend_more_video.0"
       class="right_up_logo">
      <img alt="" src="../../public/cover/bilibili.png">
    </a>
    <!-- 主要容器 -->
    <div class='main_container'>
      <section class="firstPage_back">
        <el-container>
          <!-- 顶部导航 -->
          <el-header>
            <el-menu :default-active="activeIndex" mode="horizontal"
                     @select="handleSelect" text-color="#fff" background-color="transparent"
                     active-text-color="#ffd04b">
              <el-submenu index="/home" background-color="#fff">
                <!-- 使用vue的ei-menu-item控件实现下拉菜单 -->
                <!-- 使用index分栏 -->
                <template slot="title">在线文档</template>
                <div style="overflow-y: auto;     max-height: calc(100vh - 200px);">
                  <el-menu-item class="acc" index="/home" @click="to_menu('https://c-cpp.com/')">
                    C中文文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('https://docs.python.org/zh-cn/3/')">
                    python官方文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('https://pytorch.org/docs')">
                    pytorch官方文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home"
                                @click="to_menu('https://www.w3cschool.cn/tensorflow_python/')">
                    Tensorflow官方文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('https://git-scm.com/book/zh/v2')">
                    Git中文教程
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home"
                                @click="to_menu('https://svnbook.red-bean.com/nightly/zh/index.html')">
                    SVN中文手册
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('https://jquery.cuishifeng.cn/')">
                    jQuery API中文文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('https://www.nginx.cn/doc/index.html')">
                    Nginx中文文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('https://kafka.apachecn.org/')">
                    Kafka中文文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home"
                                @click="to_menu('https://mybatis.org/mybatis-3/zh/index.html')">
                    Mybatis中文文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home"
                                @click="to_menu('https://developers.weixin.qq.com/miniprogram/dev/framework/')">
                    微信小程序官方文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('http://nodejs.cn/learn')">
                    Nodejs中文教程文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('http://httpd.apache.org/docs/')">
                    Apache Web Server文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home"
                                @click="to_menu('https://www.springcloud.cc/spring-reference.html')">
                    Spring文档中文版
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('https://studygolang.com/pkgdoc')">
                    Golang标准库文档中文版
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home"
                                @click="to_menu('https://docs.oracle.com/javase/8/docs/api/index.html')">
                    Java 8官方文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('http://maven.apache.org/guides/')">
                    Maven官方文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home"
                                @click="to_menu('http://tomcat.apache.org/tomcat-8.0-doc/index.html')">
                    Tomcat 8官方文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home"
                                @click="to_menu('https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/')">
                    Spring Boot官方文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home"
                                @click="to_menu('https://www.rabbitmq.com/documentation.html')">
                    RabbitMQ官方文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home"
                                @click="to_menu('http://rocketmq.apache.org/docs/quick-start/')">
                    RocketMQ官方文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('https://dubbo.apache.org/zh/docs/')">
                    Dubbo中文文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('https://netty.io/wiki/index.html')">
                    Netty官方文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home"
                                @click="to_menu('https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html')">
                    Elasticsearch官方文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('https://spring.io/projects/spring-cloud')">
                    Spring Cloud官方文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('https://docs.docker.com/get-started/')">
                    Docker官方文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('https://kubernetes.io/zh/docs/home/')">
                    Kubernetes中文文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home"
                                @click="to_menu('https://www.thymeleaf.org/documentation.html')">
                    Thymeleaf官方文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('https://cn.vuejs.org/v2/guide/')">
                    Vue.js中文文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home"
                                @click="to_menu('https://reactjs.org/docs/getting-started.html')">
                    React.js官方文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home" @click="to_menu('https://www.jenkins.io/zh/doc/')">
                    Jenkins中文文档
                  </el-menu-item>
                </div>
              </el-submenu>
              <el-submenu index="/home1">
                <template slot="title">划水必备</template>
                <div style="overflow-y: auto; max-height: calc(100vh - 200px);">
                  <el-menu-item class="acc" index="/home1" @click="to_menu('https://www.bilibili.com/')">
                    小破站
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home1" @click="to_menu('https://mo.fish/')">
                    鱼塘热榜
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home1" @click="to_menu('http://www.mazegenerator.net/')">
                    Maze Generator
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home1" @click="to_menu('https://duomoyu.com/')">
                    多摸鱼
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home1" @click="to_menu('http://slither.io/')">
                    贪吃蛇
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home1" @click="to_menu('https://www.anyknew.com/#/')">
                    热点归档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home1" @click="to_menu('https://flipanim.com/')">
                    flipanim
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home1" @click="to_menu('https://zty.pe/')">
                    Typing Game
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home1" @click="to_menu('https://aidn.jp/mikutap/')">
                    Mikutap
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home1" @click="to_menu('https://lmbtfy.cn/')">
                    沙雕百度
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home1"
                                @click="to_menu('https://suulnnka.github.io/BullshitGenerator/index.html')">
                    狗屁不通文章生成器
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home1" @click="to_menu('https://zzkia.noddl.me/')">
                    诺基亚短信图片生成器
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home1" @click="to_menu('https://monkeytype.com/')">
                    快乐打字
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home1" @click="to_menu('https://www.cstimer.net/')">
                    魔方
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home1"
                                @click="to_menu('https://web.sanguosha.com/login/index.html')">
                    三国杀
                  </el-menu-item>
                </div>
              </el-submenu>
              <el-submenu index="/home2">
                <template slot="title">创作必备</template>
                <div style="overflow-y: auto; max-height: calc(100vh - 200px);">
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://www.processon.com/')">
                    在线画图工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('http://www.mindline.cn/webapp')">
                    在线思维导图
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://mdnice.com/')">
                    在线字数统计
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://www.processon.com/')">
                    在线MD排版
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://sm.ms/')">
                    在线免费图床
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://carbon.now.sh/')">
                    在线代码截图
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('http://mrw.so/')">
                    在线短链接生成
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://www.fly63.com/tool/textreplace/')">
                    在线文本替换
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://docsmall.com/')">
                    在线文件压缩工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://cn.office-converter.com/')">
                    在线多媒体转换器
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://smallpdf.com/cn/pdf-tools')">
                    在线PDF工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://www.uupoop.com/')">
                    在线PS
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://www.uugai.com/')">
                    logo在线制作
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://www.designcap.com/')">
                    在线海报设计工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://feathericons.com/')">
                    Open Source Icons
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://fabiaoqing.com/')">
                    表情包在线网站
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://bigjpg.com/')">
                    图片智能放大工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://www.remove.bg/zh')">
                    在线抠图工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://www.fly63.com/php/ico/')">
                    ICO图标在线生成
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://www.fly63.com/tool/giftxt/')">
                    视频转GIF工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://pixabay.com/zh/')">
                    Pixabay图片素材库
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://unsplash.com/')">
                    Unsplash图片素材库
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('http://www.pexels.com/')">
                    Pexels图片素材库
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://www.yinxiang.com/')">
                    印象笔记
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://note.youdao.com/')">
                    有道笔记
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://www.onenote.com/')">
                    OneNote
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://mubu.com/home')">
                    幕 布
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('ttps://shimo.im/')">
                    石墨文档
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://www.wiz.cn/')">
                    为知笔记
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home2" @click="to_menu('https://www.yuque.com/')">
                    语 雀
                  </el-menu-item>
                </div>
              </el-submenu>
              <el-submenu index="/home3">
                <template slot="title">开发必备</template>
                <div style="overflow-y: auto;     max-height: calc(100vh - 200px);">
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.fly63.com/tool/ascii/')">
                    ASCII码表
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://regexr.com/')">正则表达式调试工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://jex.im/regulex/')">正则表达式可视化
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://base64.supfree.net/')">BASE64编解码工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.zxgj.cn/g/md5')">MD5编码工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.fly63.com/tool/cipher/')">
                    AES/DES加解密
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('http://jwt.calebb.net/')">JWT解码工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3"
                                @click="to_menu('https://www.matools.com/code-convert-ascii')">ASCII编解码工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.zxgj.cn/g/unicode')">
                    Unicode编解码工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.zxgj.cn/g/utf8')">UTF-8编解码工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.zxgj.cn/g/enstring')">字符串编解码工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.zxgj.cn/g/jinzhi')">通用进制转换工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('http://www.binaryconvert.com/')">浮点数十进制转换
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.zxgj.cn/g/yansezhi')">RGB颜色转换
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.zxgj.cn/g/unix')">时间戳转换工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.json.cn/')">在线JSON解析
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://prettier.io/playground/')">
                    在线JS代码格式化工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://enjoycss.com/')">CSS可视化工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.zxgj.cn/g/xmlformat')">
                    XML格式化工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.zxgj.cn/g/sqlformat')">
                    SQL压缩/格式化工具
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.zxgj.cn/g/jsonxml')">
                    JSON/XML在线转换
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.fly63.com/tool/jsonyaml/')">
                    JSON/YAML在线转换
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.ipip.net/ip.html')">IP地址查询
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.fly63.com/php/http/')">
                    HTTP在线接口测试
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.zxgj.cn/g/uuid')">UUID在线生成器
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.zxgj.cn/g/suijishu')">随机数生成器
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://c.runoob.com/')">在线编译套装
                  </el-menu-item>
                  <el-menu-item class="acc" index="/home3" @click="to_menu('https://www.fly63.com/tool/textdiff/')">
                    在线文本比对
                  </el-menu-item>
                </div>
              </el-submenu>
            </el-menu>
          </el-header>
          <!-- 主要区域 -->
          <el-main>
            <!-- 框框套框框实现转转转特效 -->
            <div class="box01_content">
              <div class="head_div">
                <div class="cycle_item">
                  <div class="green_cycle">
                    <img alt="" class="green_cycle_img" src="../../public/cover/green_cycle.svg">
                    <div class="yellow_cycle">
                      <img alt="" class="yellow_cycle_img" src="../../public/cover/yellow_cycle.svg">
                      <div class="blue_cycle">
                        <img alt="" class="blue_cycle_img" src="../../public/cover/blue_cycle.svg">
                        <div class="head_img_div">
                          <img alt="" class="head_img" src="../../public/cover/Icon.png">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 列表，实现居中文字介绍 -->
                <ul style="display: block;">
                  <li style="display: block;  margin: 0 auto; color:lightblue; text-align: center; max-width: 500px">
                    本站取名为<strong>CUPK编程导航页</strong>，开发者为
                    <strong>中国石油大学(北京)克拉玛依校区2020级本科生。</strong>
                    旨在为本校/外校计算机系同学提供一系列学习路线、文档资源、高效工具等，自我提高，方便他人。
                    由于开发者水平有限+等诸多原因，内容可能难以兼顾全面，请谅解。
                  </li>
                  <li>
                    <h2 style="    margin-block-start: 0.83em;margin-block-end: 0.83em;margin-inline-start: 0px;margin-inline-end: 0px;">
                      <a style="display: block; color: white; text-align: center; box-sizing: border-box;font-size: 1.5em;font-weight: bold; font-family: 字魂110号-武林江湖体">
                        程序员不会写代码难道要去打LOL吗？
                      </a>
                    </h2>
                  </li>
                </ul>
                <!-- 样式基本统一的天然生态绿色按钮 -->
                <p style="display: block;margin-block-start: 1em;margin-block-end: 1em;margin-inline-start: 0;margin-inline-end: 0;text-align: center;">
                  <a class="main_button" href="/MainPage">
                    开始阅读
                  </a>
                  <a class="main_button" href="https://blog.csdn.net/qq_27846147?spm=1000.2115.3001.5343"
                     target="_blank">
                    联系作者
                  </a>
                </p>
                <p style="display: block;margin-block-start: 1em;margin-block-end: 1em;margin-inline-start: 0;margin-inline-end: 0;text-align: center;">
                  <a class="second_button" href="/search">
                    搜索主页
                  </a>
                  <a class="second_button" href="/history">
                    历史导航
                  </a>
                  <a class="second_button" href="/littleStation">
                    资料小站
                  </a>
                </p>
              </div>
            </div>
          </el-main>
        </el-container>
      </section>
    </div>
  </div>

</template>

<script>
export default {
  // 名称
  name: 'cover',
  data() {
    return {
      //路由
      activeIndex: '/cover'
    };
  },
  //函数
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    to_menu(url) {
      window.open(url, '_blank');
    }
  },
  created() {
  }
}
</script>

<style scoped>
/* 右上角浮动logo */
.right_up_logo {
  border-bottom: 0;
  position: fixed;
  right: 0;
  text-decoration: none;
  top: 0;
  z-index: 1;
}
/*p标签*/
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

/*整体样式*/
* {
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* -webkit-text-size-adjust: none; */
  -webkit-touch-callout: none;
  box-sizing: border-box;
}


/*body样式*/
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: #34495e;
  font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  margin: 0;
  overflow-x: hidden;
}

/*设置main标签样式*/
main {
  display: block;
  position: relative;
  width: 100vw;
  height: 100%;
  z-index: 0;
  color: #34495e;
  font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  margin: 0;
  overflow-x: hidden;
}

/*设置按钮样式（两种）*/
.main_button {
  flex: 1;
  text-align: center;
  position: relative;
  border-radius: 2rem;
  border: 1px solid #42b983;
  box-sizing: border-box;
  color: #42b983;
  display: inline-block;
  font-size: 1.05rem;
  letter-spacing: .05rem;
  margin: .5rem .3rem;
  padding: .75em 1.6rem;
  text-decoration: none;
  transition: all .15s ease;
}

.second_button {
  flex: 1;
  text-align: center;
  position: relative;
  border-radius: 2rem;
  border: 1px solid #42b983;
  box-sizing: border-box;
  background-color: #42b983;
  color: #ffffff;
  font-style: inherit;
  display: inline-block;
  font-size: 1.05rem;
  letter-spacing: .05rem;
  margin: .5rem .3rem;
  padding: .75em 1.6rem;
  text-decoration: none;
  transition: all .15s ease;
}

/*背景样式*/
.firstPage_back {
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: none;
  box-sizing: border-box;
  background: url("../../public/cover/background.jpg") center center / cover;
  overflow-x: hidden;
  --docsify_dark_mode_bg: undefined;
  --docsify_dark_mode_btn: #42b983;
  --text_color: undefined;
  letter-spacing: 0;
  margin: 0;
}

.main_container {
  overflow-x: hidden;
  margin: 0;
}

/*设置控件背景、宽高等信息，不能删去*/
.el-container {
  height: 100%;
}

.el-header {
  padding: 0;
}

.el-main {
  padding: 0;
  height: 100%;
}

.el-menu--horizontal {
  background: #fff;
  width: 100%;
}

/*下拉菜单样式*/
.acc {
  display: block !important;
  width: 60%;
  background-color: transparent !important;
  text-align: center;
}

.acc.is-active {
  color: #ffffff !important;
  text-align: center;
}

/*设置转转转的堆叠顺序*/
.box01_content {
  z-index: 3;
}

/*主要内容div宽高*/
.head_div {
  width: 80%;
  margin: 0 auto;
  height: 50%;
}

/*转转转自身大小*/
.cycle_item {
  width: 400px;
  height: 330px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/*绿色转转转*/
.green_cycle {
  width: 260px;
  height: 260px;
  margin: 0 auto;
  padding-top: 25px;
}

/*黄色转转转*/
.yellow_cycle {
  display: inline-block;
  width: 240px;
  height: 240px;
  margin: 10px;
}

/*蓝色转转转*/
.blue_cycle {
  width: 220px;
  height: 220px;
  text-align: center;
  margin: 10px auto 10px auto;
}

/*绝对定位*/
.green_cycle_img, .yellow_cycle_img, .blue_cycle_img {
  position: absolute;
}

/*转转转中心图片所在div样式*/
.head_img_div {
  position: relative;
  z-index: 2;
  display: inline;
  width: 200px;
  height: 200px;
  margin-top: 7px;
}

/*转转转中心图片样式*/
.head_img {
  display: inline-block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 3px solid pink;
  margin: 7px;
  -webkit-animation: headneon 1.5s ease-in-out infinite alternate;
  -moz-animation: headneon 1.5s ease-in-out infinite alternate;
  animation: headneon 1.5s ease-in-out infinite alternate;
}

/*绿色转起来*/
.green_cycle_img {
  animation-name: clockwise;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;

  /*safari & Chrome */
  -webkit-animation-name: clockwise;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
}

/*黄色转起来*/
.yellow_cycle_img {
  animation-name: anticlockwise;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;

  /*safari & Chrome */
  -webkit-animation-name: anticlockwise;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
}

/*蓝色转起来*/
.blue_cycle_img {
  animation-name: clockwise;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;

  /*safari & Chrome */
  -webkit-animation-name: clockwise;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
}

/*转动方向*/
@-webkit-keyframes clockwise {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes anticlockwise {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
  }
}

.box01_content .box01_p {
  font-size: 20px;
  font-weight: lighter;
  line-height: 38px;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  transition: all ease 0.3s;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  cursor: pointer;
}

.box01_content .box01_p:hover {
  font-size: 22px;
  color: white;
}

/*网页自适应*/
@media screen and (max-width: 700px) {
  .box01_content .box01_p {
    font-size: 0.8rem;
    line-height: 1.6rem;
  }
}

</style>

